<template>
  <!-- 页面-菜单管理-添加 -->
  <div class="sidelip-box service-form">
    <Form
      ref="serviceForm"
      class="ivu-form-no-margin-bottom"
      :label-width="95"
      :model="modelForm"
    >
      <Row :gutter="20" class="code-row-bg">
        <Col span="5" style="border:none;">
          Header
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg" v-for="(item, index) in modelForm.headerList" :key="'header'+index">
        <Col span="1" style="border:none;">
          <div class="operate">
            <Icon type="ios-add-circle-outline" @click="handleAdd('header')" v-if="(index + 1) === modelForm.headerList.length"/>
            <Icon type="ios-remove-circle-outline" @click="handleReduce('header', index)" v-if="(index + 1) === modelForm.headerList.length"/>
          </div>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width:100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.valuemthod')">
            <Select transfer v-model="item.method"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuemthod')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="receiveType" :label="$t('module.serviceManage.valuetype')">
            <Select transfer v-model="item.type"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="value" :label="$t('module.serviceManage.paramname')" v-if="item.method==='REST'">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.value"
            ></Input>
          </Form-item>

          <Form-item prop="value" :label="$t('module.serviceManage.parsingkey')" v-else>
            <div style="display: flex;">
              <Input
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.parsingkey')"
              
              v-model="item.value"
              style="width:100%"
            ></Input>
            <RPButton optType="search" @click="paramConfig" :text="$t('module.serviceManage.paramconfig')" />
            </div>
          </Form-item>
        </Col>
      </Row>

      <Row :gutter="20" class="code-row-bg">
        <Col span="5" style="border:none;">
          Body
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg" v-for="(item, index) in modelForm.bodyList" :key="'body'+index">
        <Col span="1" style="border:none;">
          <div class="operate">
            <Icon type="ios-add-circle-outline" @click="handleAdd('body')" v-if="(index + 1) === modelForm.bodyList.length"/>
            <Icon type="ios-remove-circle-outline" @click="handleReduce('body', index)" v-if="(index + 1) === modelForm.bodyList.length"/>
          </div>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width:100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.valuemthod')">
            <Select transfer v-model="item.method"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuemthod')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="receiveType" :label="$t('module.serviceManage.valuetype')">
            <Select transfer v-model="item.type"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="value" :label="$t('module.serviceManage.paramname')" v-if="item.method==='REST'">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.value"
            ></Input>
          </Form-item>

          <Form-item prop="value" :label="$t('module.serviceManage.parsingkey')" v-else>
            <div style="display: flex;">
              <Input
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.parsingkey')"
              
              v-model="item.value"
              style="width:100%"
            ></Input>
            <RPButton optType="search" @click="paramConfig" :text="$t('module.serviceManage.paramconfig')" />
            </div>
          </Form-item>
        </Col>
      </Row>

      <Row :gutter="20" class="code-row-bg">
        <Col span="5" style="border:none;">
          Url
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg" v-for="(item, index) in modelForm.urlList" :key="'url'+index">
        <Col span="1" style="border:none;">
          <div class="operate">
            <Icon type="ios-add-circle-outline" @click="handleAdd('url')" v-if="(index + 1) === modelForm.urlList.length"/>
            <Icon type="ios-remove-circle-outline" @click="handleReduce('url', index)" v-if="(index + 1) === modelForm.urlList.length"/>
          </div>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.paramname')">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.name"
              style="width:100%"
            ></Input>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="name" :label="$t('module.serviceManage.valuemthod')">
            <Select transfer v-model="item.method"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuemthod')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="receiveType" :label="$t('module.serviceManage.valuetype')">
            <Select transfer v-model="item.type"  :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.valuetype')">
              <Option
                :value="item.vsiKey"
                :key="index"
                v-for="(item, index) in valueSet.gateway_receive_type"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="5" style="border:none;">
          <Form-item prop="value" :label="$t('module.serviceManage.paramname')" v-if="item.method==='REST'">
            <Input
              :placeholder="$t('common.pleaseInput') + $t('module.serviceManage.paramname')"
              
              v-model="item.value"
            ></Input>
          </Form-item>

          <Form-item prop="value" :label="$t('module.serviceManage.parsingkey')" v-else>
            <div style="display: flex;">
              <Input
              :placeholder="$t('common.pleaseSelect') + $t('module.serviceManage.parsingkey')"
              
              v-model="item.value"
              style="width:100%"
            ></Input>
            <RPButton optType="search" @click="paramConfig" :text="$t('module.serviceManage.paramconfig')" />
            </div>
          </Form-item>
        </Col>
      </Row>
      
    </Form>
  </div>
</template>
<script>
import menuAPI from "@/api/menuAPI.js";
import locales from "./locales.js";
import { codeReg } from "@/const.js";
import configKey from "./configKey.vue";


// 一天的毫秒数
const ONE_DAY = 86400000;
export default {
  name: "menu-edit",
  mixins: [locales],
  components: {},
  props: {
    valueSet: {},
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    },
    rowList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modelForm: {
        headerList: [
          {name: "", method: "", type: "", value: ""}
        ],
        bodyList: [
          {name: "", method: "", type: "", value: ""}
        ],
        urlList: [
          {name: "", method: "", type: "", value: ""}
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    paramConfig() {
      new this.$pageModal(
        configKey,
        {
          props: {
            valueSet: this.valueSet
          }
        },
        data => {
          data && this.search(this.$refs.serviceTable.param.pageNum);
        }
      );
    },
    handleAdd(param) {
      if(param === "header") {
        this.modelForm.headerList.push({name: "", method: "", type: "", value: ""})
      }else if(param === "body") {
        this.modelForm.bodyList.push({name: "", method: "", type: "", value: ""})
      }else if(param === "url") {
        this.modelForm.urlList.push({name: "", method: "", type: "", value: ""})
      }
    },
    handleReduce(param, index) {
      if(param === "header" && this.modelForm.headerList.length > 1) { 
        this.modelForm.headerList.splice(index, 1)
      }else if(param === "body" && this.modelForm.bodyList.length > 1) {
        this.modelForm.bodyList.splice(index, 1)
      }else if(param === "url" && this.modelForm.urlList.length > 1) {
        this.modelForm.urlList.splice(index, 1)
      }
    },
    save() {
      // this.$refs["serviceForm"].validate(valid => {
      //   if (valid) {
      //     this.actions[0].loading = true;
      //     if (this.modelForm.id) {
      //       let param = this.modelForm;
      //       menuAPI
      //         .updateMenu(param)
      //         .then(response => {
      //           this.actions[0].loading = false;
      //           this.$message.success({
      //             content: this.$t("module.serviceManage.warning.updateSuccessfully"),
      //             duration: 3
      //           });
      //           this.$emit("Close", true);
      //         })
      //         .catch(data => {
      //           this.actions[0].loading = false;
      //         });
      //     } else {
      //       let param = this.modelForm;
      //       menuAPI
      //         .addMenu(param)
      //         .then(response => {
      //           this.actions[0].loading = false;
      //           this.$message.success({
      //             content: this.$t("module.serviceManage.warning.createMenuSuccessfully"),
      //             duration: 3
      //           });
      //           this.$emit("Close", true);
      //         })
      //         .catch(data => {
      //           this.actions[0].loading = false;
      //         });
      //     }
      //   }
      // });
    }
  }
};
</script>
<style lang="less">
.service-form {
  .operate {
    height: 34px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      font-size: 24px;
      color: #ff6f4b;
      cursor: pointer;
    }

  }
  .ivu-btn-warning {
    padding: 4px 23px;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
    border-radius: 0;
  }
  .ivu-btn-warning:hover {
    padding: 4px 23px;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
    border-radius: 0;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}
.ivu-form .ivu-form-item-label {
  padding: 10px 9px 10px 0 !important;
}
    
</style>
